<template>
	<view @tap="closePopover">
		<navbar title='订单详情'
			background='linear-gradient(180deg, rgba(68, 212, 168, 0.3) 0%, rgba(68, 212, 168, 0) 100%)'></navbar>
		<scroll-view scroll-y="true" class="scrollContent" :style="{top: isH5 ? '70px' : `${ 68 + statusBarHeight}px`}">
			<view class="content">
				<!-- <view class="c1 dzf">
					<view class="dzf">
						<image src="/static/images/order/djs.svg" mode=""></image>
						<text>等待支付...</text>
					</view>
					<view class="c1P">
						<text class="time">30:00</text>
						<text class="timeP">后订单将会自动取消</text>
					</view>
				</view> -->
				<!-- <view class="c1 djx">
					<view class="djx">
						<image src="/static/images/order/sm.svg" mode=""></image>
						<text>待进行</text>
					</view>
					<view class="c1P">
						<text class="timeP">您已下单成功，请耐心等待服务上门 </text>
					</view>
				</view> -->
				<!-- <view class="c1 jxz">
					<view class="jxz">
						<image src="/static/images/order/sl.svg" mode=""></image>
						<text>进行中</text>
						<text></text>
					</view>
					<view class="c1P">
						<text class="timeP timeP2">服务时间剩余</text>
						<text class="time">00:30:00</text>
					</view>
				</view> -->
				<!-- <view class="c1 ywc">
					<view class="ywc">
						<view class="iconfont icon-xiaolian">
						</view>
						<text>已完成</text>
					</view>
					<view class="c1P">
						<text class="timeP">感谢您对我们的支持，欢迎下次光临</text>
					</view>
				</view> -->
				<view class="c1 ywc">
					<view class="ywc">
						<view class="iconfont icon-gantanhao">
						</view>
						<text>已取消</text>
					</view>
					<view class="c1P">
						<text class="timeP">感谢您对我们的支持，欢迎下次光临</text>
					</view>
				</view>
				<view class="alterP">
					<text>请勿留下联系方式，禁止私下交易，如有发现封号处理，私下交易的任何保障保险一律不生效！</text>
				</view>
				<view class="callPolice">
					<image src="/static/images/order/jb.svg" mode=""></image>
					<text>一键报警</text>
				</view>
				<view class="c2">
					<view class="c2Left">
						<view class="c2TopCon">
							<text class="name">张先生</text>
							<text>13514234123</text>
						</view>
						<view class="c2BottomCon">
							<view class="iconfont icon-dingwei">
							</view>
							<text>广东省东莞市东城街道君豪商业中心</text>
						</view>
					</view>
					<view class="iconfont icon-youjiantouright">
					</view>
				</view>
				<view class="c3">
					<view class="fontWeight c3Title">
						<text>价格明细</text>
					</view>
					<view class="c3Item">
						<text>商品价格</text>
						<text class="fontWeight">￥200.00</text>
					</view>
					<view class="c3Item">
						<text>优惠</text>
						<view class="yhCon">
							<text class="yh">-￥20.00</text>
							<view class="iconfont icon-changyong_huifu">
							</view>
						</view>
					</view>
					<view class="c3Item">
						<text>合计金额</text>
						<text class="hj">￥180.00</text>
					</view>
				</view>
				<view class="c4">
					<view class="c4Top">
						<view class="c4Left">
							<image src="/static/images/nav-tag-1.png" mode=""></image>
						</view>
						<view class="c4Right">
							<text class="fontWeight c4Title">全身理疗按摩</text>
							<text>上门时间：2025-03-06 09:00</text>
							<text>项目时间：60分钟</text>
							<text>项目价格：￥248.00</text>
						</view>
					</view>
					<view class="c4Border">
					</view>
					<view class="rang">
					</view>
					<view class="rang rang2">
					</view>
					<view class="c4Bottom">
						<image src="/static/images/nav-tag-1.png" mode=""></image>
					</view>
				</view>
				<view class="c3">
					<view class="fontWeight c3Title">
						<text>个人情况说明</text>
					</view>
					<view class="dec">
						<text>用户个人情况说明的特殊需求（如"使用艾草热敷包""避免按压腰部"）</text>
					</view>
				</view>
				<view class="c3">
					<view class="fontWeight c3Title">
						<text>使用记录</text>
					</view>
					<view class="c3Item c3Font">
						<text>核验时间</text>
						<view class="yhCon">
							<text>2024-03-06 09:26:35</text>
						</view>
					</view>
					<view class="c3Item c3Font">
						<text>核验人</text>
						<text>王二狗</text>
					</view>
				</view>
				<view class="c3">
					<view class="fontWeight c3Title">
						<text>订单信息</text>
					</view>
					<view class="c3Item c3Font">
						<text>订单编号</text>
						<view class="yhCon">
							<view class="iconfont icon-fuzhi copyIcon">
							</view>
							<text>45856955855235</text>
						</view>
					</view>
					<view class="c3Item c3Font">
						<text>下单时间</text>
						<text>2024-03-06 09:26:35</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="commonBtnOrderDetail">
			<text>取消订单</text>
			<!-- <text>申请售后</text>
			<text>删除订单</text> -->
			<!-- <view class="btn">
				<view class="btnP">
					<text>立即支付</text>
					<text class="price">￥180.5</text>
				</view>
			</view> -->
			<view class="btn" @tap="goto('pages/order/orderTip')">
				<text>打赏</text>
			</view>
			<!-- <view class="btn">
				<text>再次下单</text>
			</view>
			<view class="btn">
				<text>完成</text>
			</view>
			<view class="btn">
				<text>再来一单</text>
			</view> -->
		</view>
		<!-- <view class="commonBtnOrderDetail commonBtnOrderDetail2">
			<popover placement="top-start" :options="popoverData" ref="Popover" @select="popoverSelect">
				<text>更多</text>
			</popover>
			<text>评价一下</text>
			<view class="btn btn2" @tap="goto('pages/order/orderTip')">
				<text>打赏</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		components: {

		},
		data() {
			return {
				popoverData: [{
						text: '申请售后'
					},
					{
						text: '开具发票'
					},
					{
						text: '删除订单'
					},
				]
			}
		},
		methods: {
			closePopover() {
				if(this.$refs.Popover){
					this.$refs.Popover.close()
				}
			},
			popoverSelect(val) {
				console.log('val', val);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fontWeight {
		font-weight: bold;
	}

	.scrollContent {
		position: relative;
		z-index: 99;
	}

	.content {
		padding: 0 32rpx;
		padding-bottom: 150rpx;

		.c1 {
			height: 178rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 51.35rpx;
				height: 51.35rpx;
				margin-right: 18rpx;
			}

			.dzf {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(255, 140, 64, 1);
				font-weight: bold;

				.iconfont {
					font-size: 51.35rpx;
					margin-right: 18.28rpx;
				}
			}

			.djx {
				@extend .dzf;
				color: rgba(76, 212, 230, 1);
			}

			.jxz {
				@extend .dzf;
				color: $theme-color;
			}

			.ywc {
				@extend .dzf;
				color: rgba(54, 68, 79, 1);
			}

			.c1P {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 28rpx;

				.time {
					color: rgba(255, 140, 64, 1);
				}

				.timeP {
					color: rgba(152, 160, 166, 1);
					margin-left: 10rpx;
				}

				.timeP2 {
					margin-right: 10rpx;
				}
			}
		}

		.alterP {
			color: rgba(255, 85, 77, 1);
			margin: 16rpx 0;
			font-size: 24rpx;
		}

		.callPolice {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 24rpx;
			margin-bottom: 16rpx;
			color: rgba(255, 85, 77, 1);

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}

		.c2 {
			padding: 24rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 45rpx;

			.c2Left {
				font-size: 28rpx;

				.c2TopCon {
					display: flex;
					align-items: center;

					.name {
						font-weight: bold;
						margin-right: 24rpx;
					}
				}

				.c2BottomCon {
					display: flex;
					align-items: center;

					.iconfont {
						margin-right: 10rpx;
					}
				}
			}
		}

		.c3 {
			padding: 24rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			margin-top: 16rpx;
			font-size: 28rpx;

			.c3Title {
				margin-bottom: 32rpx;
			}

			.c3Item {
				display: flex;
				align-items: center;
				margin-bottom: 17.4rpx;
				justify-content: space-between;

				.yhCon {
					display: flex;
					align-items: center;

					.iconfont {
						color: rgba(152, 160, 166, 1);
						font-size: 30rpx;
					}

					.copyIcon {
						margin-right: 6rpx;
					}
				}

				.yh {
					color: rgba(152, 160, 166, 1);
					margin-right: 8rpx;
				}

				.hj {
					color: rgba(255, 140, 64, 1);
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.c3Item:last-child() {
				margin-bottom: 0
			}

			.dec {
				width: 100%;
			}
		}

		.c3Font {
			font-size: 24rpx;
		}

		.c4 {
			position: relative;
			padding: 24rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			margin-top: 16rpx;
			font-size: 28rpx;

			.c4Top {
				position: relative;
				display: flex;
				align-items: center;

				.c4Left {
					image {
						width: 166rpx;
						height: 170rpx;
					}
				}

				.c4Right {
					line-height: 45rpx;
					display: flex;
					flex-direction: column;
					font-size: 22rpx;
					margin-left: 16rpx;

					.c4Title {
						font-size: 28rpx;
					}
				}
			}

			.c4Border {
				position: relative;
				width: 100%;
				border: 2rpx dashed rgba(229, 230, 235, 1);
				margin: 52rpx 0 48rpx 0;
			}

			.rang {
				position: absolute;
				left: -25rpx;
				top: 230rpx;
				width: 48rpx;
				height: 48rpx;
				background: $page-color-base;
				// background: red;
				border-radius: 50%;
				clip-path: inset(0 0 0 50%);
				/* 裁剪掉左半部分，保留右半圆 */
			}

			.rang2 {
				left: auto;
				right: -25rpx;
				clip-path: inset(0 50% 0 0);
			}

			.c4Bottom {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 280rpx;
					height: 280rpx;
				}
			}
		}
	}

	.commonBtnOrderDetail {
		position: fixed;
		bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		height: 136rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;

		.btn {
			width: 510rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 24rpx;
			background: $theme-color;
			color: #fff;
			margin-left: 48rpx;
			font-size: 32rpx;

			.btnP {
				display: flex;
				align-items: center;

				.price {
					margin-left: 25rpx;
				}
			}
		}
	}

	.commonBtnOrderDetail2 {
		justify-content: space-between;
		padding: 0 32rpx;
		width: -webkit-fill-available;

		.btn2 {
			width: 334rpx;
		}
	}
</style>